@use "sass:color";
@charset "UTF-8";
// Copyright (C) 2019 Checkmk GmbH - License: GNU General Public License v2
// This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
// conditions defined in the file COPYING, which is part of this source code package.

body.main {
  td.shortcuts {
    a.suggested {
      visibility: hidden;
    }
  }
}
div.success {
  .codelist {
    height: 150px;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .codelistelement {
    padding: $spacing-half;
    background-color: $ux-theme-6;
    margin: 0 $spacing-double $spacing-half 0;
    font-family: monospace;
  }
  input.button {
    margin-left: 0;
    padding: 6px 8px 4px;
  }
}

div#top_heading {
  width: 100%;
  padding: 0;
  div.titlebar {
    display: flex;
    height: 53px;
    padding: 0.5 * $spacing $spacing 0;
    background-color: $bg-color;
    > div:first-child {
      flex-grow: 1;
    }
  }
  a.title {
    padding: 0;
    margin: 6px 0 0;
    font-size: $font-size-page-title;
    font-weight: $font-weight-bold;
    color: $font-color;
    text-decoration: none;
    white-space: nowrap;
    &:hover {
      cursor: pointer;
    }
  }
  div.page_state {
    position: relative;
    display: flex;
    align-items: center;
    height: inherit;
    box-sizing: border-box;
    > a {
      display: inherit;
      align-items: inherit;
      text-decoration: none;
      &:hover {
        color: $font-color-green;
      }
    }
    &.pending_changes {
      padding-bottom: 4px;
      div.text_container span {
        display: block;
        text-align: center;
        &.changes_number {
          font-size: $font-size-page-title;
          font-weight: $font-weight-bold;
        }
      }
    }
    &.no_changes {
      padding-top: 18px;
      div.text_container {
        span.changes_number {
          display: none;
        }
        span.changes_str {
          color: $font-color-dimmed;
          &:hover {
            color: $font-color;
          }
        }
      }
    }
    div.icon_container {
      margin-left: 8px;
      img.icon {
        display: block;
        width: 2.8 * $spacing;
        height: 2.8 * $spacing;
        &:hover {
          /* disable hover effect */
          opacity: 1;
        }
      }
    }
    &.reload {
      padding-top: 2px;
      div.text_container span {
        position: absolute;
        bottom: 20px;
        font-size: $font-size-small;
        line-height: $font-size-small;
        width: 25px;
        margin-left: 8px;
        text-align: center;
      }
      div.icon_container,
      div.icon_container > img.icon {
        width: 25px;
        height: 25px;
        border: 3px solid rgba($font-color, 0.4);
        border-radius: 15px;
        box-sizing: border-box;
        transition: clip-path 0.25s;
      }
      div.icon_container > img.icon {
        /* compensate border offset */
        position: relative;
        top: -3px;
        left: -3px;
        border: 3px solid $font-color;
        clip-path: polygon(0 0);
      }
      > a:hover {
        color: $font-color;
        div.icon_container > img.icon {
          border-color: $success;
        }
      }
    }
    span#headinfo {
      display: none;
    }
  }
  div.breadcrumb {
    white-space: nowrap;
    span,
    a {
      &:last-child:after {
        content: "";
      }
      color: $font-color-dimmed;
      text-decoration: none;
    }
    a:hover {
      color: $font-color;
    }
    > :after {
      text-decoration: none;
      content: " > ";
    }
  }
  table.menubar {
    width: 100%;
    padding: 0 0 $spacing;
    white-space: nowrap;
    background-color: $bg-color;
    border-spacing: 0;
    td {
      padding: 0;
      margin: 0;
      vertical-align: middle;
      // Needed to prevent a buggy menubar display on rule edit pages (FEED-5754)
      &.menues {
        width: 1px;
      }
      &.shortcuts {
        width: 100%;
        padding: 0 3px;
        background-color: $page-menu-bg-color;
        a.disabled {
          pointer-events: none;
          img {
            filter: grayscale(100%) brightness(50%);
          }
        }
        #menu_shortcut_toggle_suggestions img {
          filter: grayscale(100%) brightness(55%);
        }
      }
      &.icon_container {
        padding-right: $spacing;
        background-color: $page-menu-bg-color;
        border-right: 1px solid $headline-color;
        img {
          width: 16px;
          height: 16px;
        }
      }
    }
    td.menues div.menucontainer,
    td.inpage_search {
      background-color: $page-menu-bg-color;
      border-bottom: 2px solid $page-menu-bg-color;
    }
    td.menues div.menucontainer {
      position: relative;
      display: inline-block;
      padding: 0;
      &.disabled {
        pointer-events: none;
        filter: grayscale(100%) brightness(55%);
      }
      &:focus {
        outline: none;
      }
      &:hover {
        border-bottom: 2px solid $success;
      }
      &:nth-child(1) {
        border-radius: $popup-filters-border-radius 0 0 $popup-filters-border-radius;
      }
      div.popup_trigger {
        height: 100%;
        padding: 0 (0.5 * $spacing);
        > a {
          text-align: center;
          text-decoration: none;
        }
        &.active div.menu {
          display: block;
        }
        &:focus {
          border: 10px solid $white;
          outline: none;
        }
        h2 {
          padding: 6px 5px 4px;
          margin: 0;
          &:hover {
            cursor: pointer;
          }
        }
      }
      div.menu {
        position: absolute;
        top: 27px;
        left: 0;
        z-index: 100;
        display: none;
        max-height: calc(100vh - 113px);
        min-width: 220px;
        padding: 0 $spacing $spacing;
        overflow-y: auto;
        line-height: 16px;
        text-align: left;
        background-color: $page-menu-bg-color;
        opacity: 1;
        scrollbar-width: none; /* Firefox */
        img,
        svg {
          width: 14px;
          height: 14px;
          margin-right: 5px;
          padding: 0 0 2px 0;
          &.emblem {
            right: 0;
            bottom: -2px;
            width: 10px;
            height: 10px;
          }
        }
        div.topic {
          &:first-child {
            margin-top: 0;
          }
          div.topic_title {
            padding: $spacing 0 2px 12px;
            font-weight: $font-weight-default;
            color: $font-color-dimmed;
            cursor: default;
          }
          div.entry {
            padding: 4px 0 0 $spacing;
            a {
              display: flex;
              align-items: center;
              text-decoration: none;
            }
            &.enabled a:hover {
              color: $font-color-green;
            }
            &.disabled a {
              text-decoration: none;
              pointer-events: none;
              cursor: default;
              opacity: 0.5;
            }
            &.hidden {
              display: none;
            }
          }
        }
        div.searchform {
          display: inline-block;
          form {
            padding: 0;
            margin: 0;
            input.text {
              position: relative;
            }
            input.button {
              display: none;
            }
          }
        }
        div.more_container {
          position: relative;
          width: 100%;
          a.more {
            position: absolute;
            top: $spacing;
            right: 0;
          }
        }
      }
    }
    &#page_menu_bar.hide_suggestions {
      td.shortcuts a.suggested {
        visibility: visible;
      }
      tr#suggestions {
        display: none;
      }
      a#menu_shortcut_toggle_suggestions {
        transform: rotate(180deg);
      }
    }
    td.inpage_search {
      padding: 2px 10px 0;
      form {
        padding: 0;
        margin: 0;
        background-color: $input-background-color;
        border-radius: 2px;
      }
      input,
      input:active,
      input:focus {
        background-color: transparent;
        border: none;
        box-shadow: none;
        box-sizing: border-box;
      }
      input[type="text"] {
        width: 180px !important;
        height: 18px;
      }
      input#inpage_search_form_reset,
      input.submit {
        padding: 0;
        margin: 0 4px;
        background-repeat: no-repeat;
        &:disabled {
          display: none;
        }
      }
      input#inpage_search_form_reset {
        width: 8px;
        height: 8px;
        background-image: url("images/icon_close.svg");
        background-size: 8px 8px;
        border-radius: 0;
      }
      input.submit {
        width: 18px;
        height: 18px;
        background-color: $success-dimmed;
        background-image: url("images/icon_search_action_button.svg");
        background-size: 14px 14px;
        background-position: center;
        filter: none;
        margin-right: 0;
      }
      img {
        width: 1px;
        height: 10px;
        margin: 0 4px;
        &:hover {
          opacity: 1;
        }
      }
    }
  }
  tr#suggestions {
    background-color: $bg-color;
    td {
      width: 100%;
      padding: 6px 3px 3px 0;
      @keyframes easyhoverbg {
        from {
          background-color: 1px solid $button-bg-color-suggestions;
        }
        to {
          background-color: 1px solid $button-bg-color-default;
        }
      }
      div.suggestion {
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
        margin: $spacing-quarter $spacing-half $spacing-quarter 0;

        &.disabled a {
          pointer-events: none;
          background-color: $input-button-hover-bg-color;
          opacity: 0.5;
        }

        a {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 30px;
          padding: 0 8px;
          font-weight: $font-weight-bold;
          line-height: 16px;
          color: $font-color;
          text-decoration: none;
          background-color: $button-bg-color-suggestions;
          border: 1px solid $default-button-border-color;
          border-radius: 4px;
          box-sizing: border-box;
          &:hover {
            cursor: pointer;
            background-color: $button-bg-color-default;
            animation-duration: 0.5s;
            animation-name: easyhoverbg;
            animation-fill-mode: forwards;
          }
          img {
            width: 15px;
            height: 15px;
            padding: 0;
            margin-right: 5px;
            &:hover {
              opacity: 1;
            }
            &.emblem {
              right: -2px;
              width: 10px;
              height: 10px;
            }
          }
        }
        &.submit a {
          border: 1px solid $default-submit-button-border-color;
        }
      }
    }
  }
}
div#page_menu_popups {
  margin-right: $spacing;
  .confirm_container,
  .message_container {
    position: static;
    padding: 0;
    .confirm_popup {
      padding: 16px;
      background-color: $headline-color;
      margin-bottom: $spacing;
      button.confirm_question,
      button.confirm_success,
      button.confirm_warning {
        margin-left: 0px;
      }
      button.confirm_question {
        &,
        &:active {
          color: $font-color-light-bg;
          background-color: $color-state-1-background;
          border-color: $color-state-1-background;
        }
        &:hover {
          background-color: color.adjust($color-state-1-background, $lightness: -5%);
          border-color: color.adjust($color-state-1-background, $lightness: -5%);
        }
      }
      button.confirm_warning {
        &,
        &:active {
          color: $white;
          background-color: color.adjust($color-state-2-background, $lightness: -5%);
          border-color: color.adjust($color-state-2-background, $lightness: -5%);
        }
        &:hover {
          background-color: $color-state-2-background;
          border-color: $color-state-2-background;
        }
      }
      button.confirm_success {
        &,
        &:active {
          color: $font-color-light-bg;
          background-color: $success-dimmed;
          border-color: $success-dimmed;
        }
        &:hover {
          background-color: $success;
          border-color: $success;
        }
      }
    }
  }
  .confirm_icon,
  .message_icon {
    position: absolute;
    width: 25px;
    height: 100%;
    background-color: $success-dimmed;
    border: 0;
    border-radius: $border-radius-left;
    margin: 0;
    font-size: 7px;
    font-weight: $font-weight-bold;
    color: $font-color-light-bg;
    &.confirm_question {
      background-color: $yellow;
      border-color: $yellow;
    }
    &.confirm_warning {
      color: $white;
      background-color: $color-state-2-background;
      border-color: $color-state-2-background;
    }
    &.confirm_success,
    &.message_success {
      background-color: $success;
      border-color: $success;
    }
  }
  .message_content {
    text-align: left;
    padding-left: 15px;
  }

  .message_close {
    position: absolute;
    top: 25%;
    font-size: 20px;
  }

  .confirm_title,
  .confirm_content {
    color: $font-color;
    font-size: $font-size-large;
    padding: 0;
    text-align: left;
    table {
      margin-left: -3px;
      &:before {
        content: "";
        display: block;
        margin-top: 5px;
      }
    }
  }
  .confirm_title {
    margin: 0 25px 0px;
    font-weight: $font-weight-bold;
  }
  .confirm_content,
  .message_content {
    margin: 5px 25px 0px;
    div.confirm_info,
    div.confirm_block {
      margin-top: 0.5 * $spacing;
    }
  }
  .confirm_actions {
    justify-content: flex-start;
    margin: $spacing 25px 0;
  }
}
div.page_menu_popup {
  position: relative;
  display: none;
  margin-bottom: $spacing;
  background-color: $base-color;
  border: none;
  border-radius: $popup-filters-border-radius;
  &.active {
    display: block;
  }
  &.side_popup > .head {
    background-color: inherit;
  }
  > .head {
    padding: 6px 0 5px $spacing;
    background-color: $headline-color;
    h3 {
      padding: 0;
      margin: 0;
      font-weight: $font-weight-bold;
      color: $font-color;
    }
    a.close_popup img {
      position: absolute;
      top: 8px;
      right: $simplebar-track-width;
      width: 12px;
      height: auto;
    }
  }
  &.side_popup > .content {
    padding: 0;
  }
  div.group {
    padding-top: $spacing;
    &:first-of-type {
      padding-top: 0;
    }
    .button {
      margin-left: 0px;
      &.border_hot {
        border: 1px solid $success-dimmed;
      }
    }
    input[type="date"],
    input[type="time"],
    select#_down_recurring + span .select2-selection.select2-selection--single,
    .server_time {
      margin-left: 10px;
    }
    .server_time {
      color: $font-color-dimmed;
    }
    td.down_duration {
      padding: 10px;
    }
    .down_advanced {
      margin: 10px 0 10px 0;
    }
    .down_advanced_option {
      margin-bottom: 10px;
      .dictionary {
        margin-bottom: 5px;
      }
    }
    input.button.duration {
      margin: 0px;
      border: none;
      border-radius: 0px;
      border-top: 1px solid $line-color;
      border-bottom: 1px solid $line-color;
      &:first-child {
        border-radius: 4px 0 0 4px;
        border-left: 1px solid $line-color;
      }
      &:last-child {
        border-radius: 0 4px 4px 0;
        border-right: 1px solid $line-color;
      }
      &.active,
      &:hover,
      &:focus {
        background-color: color.adjust($input-button-hover-bg-color, $lightness: -7%);
      }
    }
    span.vs_age_footer {
      display: block;
      margin-top: 5px;
    }
    a.upgrade img.iconbutton {
      width: auto;
      height: auto;
      margin-left: 0.5 * $spacing;
    }
    hr {
      margin-top: 15px;
      border: 1px solid $line-color;
    }
    table.fake_check_result,
    table.down_date_and_time {
      border-spacing: 0px 10px;
    }
    &.ack_command_options {
      h2 {
        display: inline-block;
        + span {
          margin-left: 0.5 * $spacing;
          &,
          a {
            opacity: 0.8;
          }
        }
      }
      div {
        margin-top: 1.5 * $spacing;
        &.example {
          margin-top: 0.5 * $spacing;
          margin-left: 2 * $spacing;
          color: $font-color-dimmed;
        }
        span.checkbox {
          padding-right: 0;
        }
        &.date_time_picker {
          display: inline-block;
          margin-top: 0;
          input[type="date"]:not(.active),
          input[type="time"]:not(.active) {
            color: $font-color-dimmed;
          }
        }
        &.disabled {
          color: $font-color-dimmed;
          input,
          label {
            pointer-events: none;
          }
        }
      }
    }
    &.buttons {
      padding-top: 2 * $spacing;
    }
  }
  form span.checkbox {
    padding-right: $spacing;
    white-space: initial;
  }
  a.down_presets {
    margin-left: 10px;
  }
}
div#inpage_search_result_info {
  color: $font-color-dimmed;
  padding-left: 8px;
  &.result_with_row_info {
    position: absolute;
  }
}
button,
input.button {
  padding: 8px 16px;
  margin: 0 $spacing;
}
/* Dashboard editor specific styling */
body.dashboard {
  div#page_menu_popups .confirm_container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-content: center;
    // Important needed to override swal2 internal definition
    background-color: rgba($black, 0.2) !important;
    .confirm_popup {
      width: 400px;
      margin: auto;
    }
  }
}
/* Filter popup specific styling */
div#page_menu_popups div.side_popup {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: 375px;
  height: 100vh;
  padding: 0;
  border-left: $popup-border;
  form {
    width: inherit;
    text-align: left;
    div.side_popup_content {
      height: calc(100vh - 86px);
      overflow-x: hidden;
      overflow-y: auto;
    }
    /* general floatfilter elment styling */
    div.floatfilter {
      padding: 0 8px 3px $spacing;
      margin: 0;
      background-color: $base-color;
      border-style: none;
      border-radius: 0;
      box-shadow: none;
      input.neg[type="text"] {
        width: 74%;
      }
      div.content {
        padding: 1px 0 5px;
        overflow: auto;
      }
      span.select2-container--default {
        display: inline-block;
      }
      &.host_auxtags {
        div.content {
          padding-bottom: 1px;
        }
        span.select2-container--default {
          margin-bottom: 4px;
        }
      }
      &.address_families {
        div.content {
          padding-bottom: 1px;
        }
      }
    }
    /* case 1: filters in list of valuespec (view filters) */
    table.filterform {
      table.valuespec_listof.filter {
        border-spacing: 0;
        > tbody {
          padding-left: 6px;
        }
        > tbody > tr > td {
          padding: 10px 0 10px 10px;
          border-bottom: 1px solid $headline-color;
          &.vlof_content {
            padding-right: 10px;
            padding-left: 5px;
            div.floatfilter {
              width: 323px;
            }
          }
        }
      }
    }
    /* case 2: floatfilters in list of valuespec (availability options) */
    > div.side_popup_content div.simplebar-content > div.floatfilter {
      width: 100%;
      padding: 10px;
      border: none;
      border-bottom: 1px solid $headline-color;
    }
    table.filterform {
      > tbody > tr > td > span {
        float: left;
        margin-bottom: 2px;
      }
    }
    div.side_popup_controls {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 10px;
      margin: 0;
      border-top: $popup-inner-border;
      border-bottom: $popup-inner-border;
      a.add {
        display: inline-block;
        padding: 4px 0;
        text-decoration: none;
        cursor: pointer;
        img {
          width: 22px;
          height: 22px;
        }
        div.description {
          display: inline-block;
          margin: 5px 10px 0;
          color: $font-color-blue-1;
        }
        &:hover,
        &.active {
          img {
            opacity: 1;
            filter: $filter-add-button-hover-brightness;
          }
          div.description {
            color: $font-color;
          }
        }
      }
      div.update_buttons {
        margin-left: auto;
        input.apply:disabled {
          opacity: 0.5;
        }
        input.reset {
          margin-right: 0;
        }
      }
    }
  }
  div.popup_filter_list {
    position: fixed;
    top: 0;
    right: 375px;
    display: none;
    width: 288px;
    height: 100vh;
    padding: 0;
    overflow: auto;
    background-color: $base-color;
    border-right: $popup-inner-border;
    border-left: $popup-border;
    &.active {
      display: block;
    }
    div.filter_group {
      margin-top: 8px;
    }
    div.filter_group:last-child {
      margin-bottom: 10px;
    }
    div.filter_group > div {
      margin-left: 8px;
    }
    a.filter_group_title {
      display: block;
      padding: 8px 10px;
      font-weight: $font-weight-bold;
      color: $font-color;
      cursor: pointer;
    }
    a.more {
      position: absolute;
      top: 8px;
      right: 6px;
      z-index: +1;
    }
    ul {
      padding: 0 20px;
      margin-top: 0;
      li {
        list-style: none;
        a {
          text-decoration: none;
          &:hover {
            text-decoration: underline;
          }
        }
        a.disabled {
          text-decoration: none;
          pointer-events: none;
          cursor: default;
          opacity: 0.5;
        }
      }
    }
    ul.inactive {
      display: none;
    }
  }
}
div#page_menu_popups div[id^="popup_add_to_"] > div.content > span {
  // valuespec has 250px hard coded
  width: 400px !important;
}
.inline_radio_group {
  input[type="radio"] {
    position: relative;
    top: -2px;
  }
  label {
    padding-right: $spacing * 3;
  }
}
#form_test_notifications {
  div.help,
  div.foldable,
  span.checkbox {
    margin-left: 10px;
  }

  div.help {
    width: 340px;
  }

  table.test_on {
    margin-top: 10px;
    border-spacing: 0px;

    td.legend {
      width: 134px;
      min-width: 134px;
      padding-left: 10px;
      padding-right: 8px;
    }

    td.test_type {
      padding-right: 10px;
      padding-left: 10px;

      .button {
        margin: 0px;
        border: none;
        border-radius: 0px;
        border: 1px solid $line-color;
        background-color: $bg-color;

        &.active,
        &:hover,
        &:focus {
          background-color: color.adjust($input-button-hover-bg-color, $lightness: -7%);
        }
      }

      input {
        border-color: 1px solid $line-color;
        #test_on_host {
          border-radius: 4px 0 0 4px;
        }

        #test_on_service {
          border-radius: 0 4px 4px 0;
        }
      }
    }
  }

  table.nform {
    background: None;
    .dots,
    .heading {
      display: None;
    }
    margin-top: 0px;
    margin-bottom: 0px;

    tr td.legend {
      width: 134px;
      min-width: 134px;

      div[title^="Host"]::after,
      div[title^="Service"]::after {
        color: $font-color-green;
        content: " (required)";
      }
    }

    .help {
      margin-left: 0;
      width: 415px;
    }
  }

  .checkbox {
    display: block;
    width: 460px;
    margin-bottom: $spacing;
  }

  #notify_plugin_d_notify_plugin {
    margin-top: -$spacing;
    margin-left: 30px;
    margin-bottom: 20px;

    span.vs_floating_text {
      margin-right: $spacing;
    }

    span[id^="notify_plugin_p_notify_plugin_"] {
      margin-left: $spacing;
    }
  }

  .foldable {
    margin-bottom: 20px;

    div#advanced_opts_d_date_and_time,
    div#advanced_opts_d_notification_nr {
      margin: 0px;
      input#date_advanced_opts_p_date_and_time_0 {
        margin-left: $spacing;
      }

      input.number {
        margin-left: 12px;
      }

      .tuple_td:last-child {
        align-content: center;
      }
    }

    div#advanced_opts_d_notification_nr {
      padding-top: 10px;
    }

    .valuespec_foldable_content {
      margin-left: $spacing-half;
      border-left: 2px solid $line-color;
    }

    .dictelement.indent {
      border-left: none;
    }
  }

  #advanced_opts_d_date_and_time {
    .title {
      color: $font-color-dimmed;
      font-size: $font-size-normal;
      padding: 0px;
    }

    .server_time {
      display: None;
    }

    #date_advanced_opts_p_date_and_time_0,
    #time_advanced_opts_p_date_and_time_1 {
      margin-right: 10px;
    }
  }
}

div.test_notifications_matching_help {
  margin-top: 10px;
}
